<template>
  <div class="mail_content">
    <el-form :inline="true" ref="searchForm" :model="searchForm" >
      <el-form-item class="block-line">
        <el-col :span="8">
          <el-input v-model="searchForm.title" placeholder="输入标题关键字搜索" @keyup.enter.native="submitForm"></el-input>
        </el-col>
        <el-col :span="3"><el-button style="margin-left:10px" type="primary" @click="submitForm">搜索</el-button></el-col>
      </el-form-item>
      <el-form-item label="内容性质：">
        <el-select v-model="searchForm.attrId" placeholder="不限" clearable>
          <el-option v-for="item,n in attrs" :value="item.id" :label="item.name" :key="n.toString()"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="查看权限">
        <el-select placeholder="不限" v-model="searchForm.authStatus" clearable>
          <el-option v-for="(item, index) in authStatus" :key="item" :value="index+1" :label="item"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="tb-head">
      <router-link :to="{name: 'EditMail', params: {id: 'add', mailId: 'self'}}"><el-button icon="plus">新建邮件</el-button></router-link>
      <el-button @click="topSet">置顶</el-button>
      <el-button @click="topCancel">取消置顶</el-button>
      <el-button @click="delCont('multiple')">删除</el-button>
      <!-- <el-button>一键停发</el-button> -->
    </div>
    <el-table ref="multipleTable" v-loading="tbLoading" element-loading-text="拼命加载中" :data="mailList.list" stripe class="table" @select="selectData" @select-all="selectData">
      <el-table-column type="selection"></el-table-column>
      <el-table-column label="标题" width="" prop="title" width="300">
        <template slot-scope="scope">
          <div class="mail-title" slot="reference">
            <a @click="$router.push({name: 'ViewMail', params: {id: scope.row.id}})" href="javascript:;">{{scope.row.title}}</a>
            <div class="mail-hot" v-if="scope.row.top==1">顶</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="内容性质">
        <template slot-scope="scope">
          {{attribute(scope.row.attrId)}}
        </template>
      </el-table-column>
      <el-table-column label="查看权限">
        <template slot-scope="scope">
          <div v-if="scope.row.groupType==1 && scope.row.commonType==1">事业部，公共</div>
          <div v-else-if="scope.row.groupType==0 && scope.row.commonType==0">{{authStatus[0]}}</div>
          <div v-else-if="scope.row.groupType==1 && scope.row.commonType==0">{{authStatus[1]}}</div>
          <div v-else-if="scope.row.groupType==0 && scope.row.commonType==1">{{authStatus[2]}}</div>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="200">
        <template slot-scope="scope">
          {{dateFormat(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260"  class-name="is-center mail-opra">
        <template slot-scope='scope'>
          <el-button type='text' @click="$router.push({name: 'EditMail', params: {id: scope.row.id, mailId: 'self'}})">详情</el-button>
          <el-button type='text' @click="dialogNewSendBtn(scope.row.id, scope.row.title)">发送设置</el-button>
          <el-button type='text' @click="delCont(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="searchForm.page"
        :page-size.sync="searchForm.size"
        layout="sizes, total, prev, pager, next, jumper"
        :total="mailList.page.total"
        :page-sizes="[10, 30, 50, 100]"
        @current-change="submitForm('searchForm')"
        @size-change="handleSizeChange">
      </el-pagination>
    </div>
    <new-send :show.sync="dialogNewSend" :newSendData.sync="newSendItem" ref="sendset"></new-send>
  </div>
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import newSend from '@/components/common/content/newSend'
  export default {
    data () {
      return {
        searchForm: {
          uid: 1,
          title: '',
          attrId: '',
          procStatus: '',
          page: 1,
          size: 10,
          authStatus: '',
          groupType: '',
          commonType: ''
        },
        procStatus: ['全部', '未提交', '待审核', '未发送', '已发送'],
        authStatus: ['仅自己可见', '事业部', '公共'],
        multipleSelection: [],
        icon: null,
        tbLoading: true,
        dialogNewSend: false,
        newSendItem: {
          title: '',
          id: '',
          type: 4
        }
      }
    },
    components: {
      newSend
    },
    mounted () {
      this.initPage()
    },
    computed: {
      ...mapState({
        mailList: state => state.contentManage.mailNewsList,
        attrs: state => state.contentManage.contentType
      })
    },
    methods: {
      ...mapActions(['getMailNewsList', 'topContent', 'delContent', 'getContentTypes']),
      initPage () {
        this.getContentTypes().then(() => this.submitForm())
      },
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
      attribute (id) {
        let attrName
        Object.values(this.attrs).forEach((key, value) => {
          if (key.id === id) {
            attrName = key.name
          }
        })
        return attrName
      },
      // 提交
      submitForm () {
        this.getMailNewsList({...this.searchForm})
          .finally((res) => {
            this.tbLoading = false
            this.multipleSelection = []
          })
      },
      // 更改每页条数
      handleSizeChange (size) {
        this.searchForm.size = size
        this.submitForm()
      },
      // 选中数据
      selectData (selection) {
        let arr = []
        selection.forEach((item, index, key) => {
          arr.push(item.id)
        })
        this.multipleSelection = arr
      },
      // 置顶
      topSet () {
        if (this.multipleSelection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择要置顶的内容'
          })
        } else {
          this.topContent({
            id: this.multipleSelection,
            top: 1
          }).then(res => {
            if (res.data.code === 1) {
              this.dialogVisible = false
              this.$message({
                type: 'success',
                message: '置顶成功'
              })
              this.submitForm()
            }
          })
        }
      },
      // 取消置顶
      topCancel () {
        if (this.multipleSelection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择要取消置顶的内容'
          })
        } else {
          this.topContent({
            id: this.multipleSelection,
            top: 0
          }).then(res => {
            if (res.data.code === 1) {
              this.dialogVisible = false
              this.$message({
                type: 'success',
                message: '取消置顶成功'
              })
              this.submitForm()
            }
          })
        }
      },
      // 删除
      delCont (item) {
        if (item === 'multiple' && this.multipleSelection.length === 0) {
          this.$message({
            type: 'warning',
            message: '请选择删除的内容'
          })
          return
        }
        this.delContent({
          id: item === 'multiple' ? this.multipleSelection : [item]
        }).then(res => {
          if (res.data.code === 1) {
            this.dialogVisible = false
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.submitForm()
          }
        })
      },
      // 发送设置
      dialogNewSendBtn (id, title) {
        this.dialogNewSend = true
        this.newSendItem.title = title
        this.newSendItem.id = id
        this.$refs.sendset.getSendRecord(id)
      }
    }
  }
</script>
<style lang="scss">
  .mail_content{
    .block-line{display:block;width:100%;}
    .block-line .el-form-item__content{display: block;}
    .avatar{margin-right:3px;width:32px;height:32px;border-radius:50%;vertical-align:middle;}
    .pagination{margin-top:16px;}
    .el-pagination{text-align:right;}
    .el-pagination__sizes{float:left;}
    .el-dropdown-menu{width:180px}
  }
  .tb-head a{margin-right: 10px;}
  .mail{
    &-title{
      display: inline-block;
      a{
        color: rgb(31, 45, 61);
        text-decoration: none;
        &:hover{
          color: #20a0ff;
        }
      }
    }
    &-hot{display: inline-block; background: #ff0000; font-size: 10px;width: 14px;height: 14px;line-height: 13px; text-align: center; color: #fff; float: right; margin-left: 10px;}
  }
</style>
